<template>
  <el-form size='small'>
  <el-form-item>
    <el-radio v-model='radioValue' :label="1">
    周，允许的通配符[, - * ? / L #]
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="2">
    不指定
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="3">
    周期从星期
    <el-select clearable v-model="cycle01">
      <el-option
      v-for="(item,index) of weekList"
      :key="index"
      :label="item.value"
      :value="item.key"
      :disabled="item.key === 1"
      >{{item.value}}</el-option>
    </el-select>
    -
    <el-select clearable v-model="cycle02">
      <el-option
      v-for="(item,index) of weekList"
      :key="index"
      :label="item.value"
      :value="item.key"
      :disabled="item.key < cycle01 && item.key !== 1"
      >{{item.value}}</el-option>
    </el-select>
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="4">
    第
    <el-input-number v-model='average01' :min="1" :max="4" /> 周的星期
    <el-select clearable v-model="average02">
      <el-option v-for="(item,index) of weekList" :key="index" :label="item.value" :value="item.key">{{item.value}}</el-option>
    </el-select>
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="5">
    本月最后一个星期
    <el-select clearable v-model="weekday">
      <el-option v-for="(item,index) of weekList" :key="index" :label="item.value" :value="item.key">{{item.value}}</el-option>
    </el-select>
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="6">
    指定
    <el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
      <el-option v-for="(item,index) of weekList" :key="index" :label="item.value" :value="String(item.key)">{{item.value}}</el-option>
    </el-select>
    </el-radio>
  </el-form-item>
  </el-form>
</template>

<script>
import { ref, computed, watch } from 'vue';

export default {
  name: 'crontab-week',
  props: ['check', 'cron'],
  setup(props) {
  const radioValue = ref(2);
  const weekday = ref(2);
  const cycle01 = ref(2);
  const cycle02 = ref(3);
  const average01 = ref(1);
  const average02 = ref(2);
  const checkboxList = ref([]);
  const weekList = [
    { key: 2, value: '星期一' },
    { key: 3, value: '星期二' },
    { key: 4, value: '星期三' },
    { key: 5, value: '星期四' },
    { key: 6, value: '星期五' },
    { key: 7, value: '星期六' },
    { key: 1, value: '星期日' }
  ];

  const checkNum = (num, min, max) => {
    return Math.max(min, Math.min(num, max));
  };

  const cycleTotal = computed(() => {
    const cycle01Value = checkNum(cycle01.value, 1, 7);
    const cycle02Value = checkNum(cycle02.value, 1, 7);
    return `${cycle01Value}-${cycle02Value}`;
  });

  const averageTotal = computed(() => {
    const average01Value = checkNum(average01.value, 1, 4);
    const average02Value = checkNum(average02.value, 1, 7);
    return `${average02Value}#${average01Value}`;
  });

  const weekdayCheck = computed(() => {
    return checkNum(weekday.value, 1, 7);
  });

  const checkboxString = computed(() => {
    const str = checkboxList.value.join();
    return str === '' ? '*' : str;
  });

  const radioChange = () => {
    if (radioValue.value !== 2 && props.cron.day !== '?') {
    // this.$emit('update', 'day', '?', 'week');
    }
    switch (radioValue.value) {
    case 1:
      // this.$emit('update', 'week', '*');
      break;
    case 2:
      // this.$emit('update', 'week', '?');
      break;
    case 3:
      // this.$emit('update', 'week', cycleTotal.value);
      break;
    case 4:
      // this.$emit('update', 'week', averageTotal.value);
      break;
    case 5:
      // this.$emit('update', 'week', `${weekdayCheck.value}L`);
      break;
    case 6:
      // this.$emit('update', 'week', checkboxString.value);
      break;
    }
  };

  const cycleChange = () => {
    if (radioValue.value === '3') {
    // this.$emit('update', 'week', cycleTotal.value);
    }
  };

  const averageChange = () => {
    if (radioValue.value === '4') {
    // this.$emit('update', 'week', averageTotal.value);
    }
  };

  const weekdayChange = () => {
    if (radioValue.value === '5') {
    // this.$emit('update', 'week', `${weekdayCheck.value}L`);
    }
  };

  const checkboxChange = () => {
    if (radioValue.value === '6') {
    // this.$emit('update', 'week', checkboxString.value);
    }
  };

  watch(radioValue, radioChange);
  watch(cycleTotal, cycleChange);
  watch(averageTotal, averageChange);
  watch(weekdayCheck, weekdayChange);
  watch(checkboxString, checkboxChange);

  return {
    radioValue,
    weekday,
    cycle01,
    cycle02,
    average01,
    average02,
    checkboxList,
    weekList,
    checkNum,
    cycleTotal,
    averageTotal,
    weekdayCheck,
    checkboxString
  };
  }
};
</script>
